<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{seriesName}}{{getLangText(label.chartTitle)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<div style="padding:0 8px;">
				<md-field>
					<label>{{getLangText(label.name)}}</label>
					<md-input v-model="graphSeries.name"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.symbol)}}</label>
					<md-select v-model="graphSeries.symbol">
						<md-option :key="item.en" :value="item.en" v-for="item in symbol">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<md-field>
					<label>{{getLangText(label.symbolSize)}}</label>
					<md-input v-model="graphSeries.symbolSize"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.symbolRotate)}}</label>
					<md-input v-model="graphSeries.symbolRotate"></md-input>
				</md-field>

				<div style="display:flex;">
					<md-field style="width:135px;">
						<label>{{getLangText(label.symbolOffset)}}</label>
						<md-input v-model="graphSeries.symbolOffset[0]"></md-input>
					</md-field>

					<md-field style="width:135px;margin-left:8px;">
						<label>{{getLangText(label.symbolOffset)}}</label>
						<md-input v-model="graphSeries.symbolOffset[1]"></md-input>
					</md-field>
				</div>

				<div style="display:flex;">
					<md-field style="width:135px;">
						<label>{{getLangText(label.edge)+getLangText(label.symbol)}}</label>
						<md-select v-model="graphSeries.edgeSymbol[0]">
							<md-option :key="item.en" :value="item.en" v-for="item in symbol">{{getLangText(item)}}</md-option>
						</md-select>
					</md-field>

					<md-field style="width:135px;margin-left:8px;">
						<label>{{getLangText(label.edge)+getLangText(label.symbol)}}</label>
						<md-select v-model="graphSeries.edgeSymbol[1]">
							<md-option :key="item.en" :value="item.en" v-for="item in symbol">{{getLangText(item)}}</md-option>
						</md-select>
					</md-field>
				</div>

				<div style="display:flex;">
					<md-field style="width:135px;">
						<label>{{getLangText(label.edge)+getLangText(label.symbolSize)}}</label>
						<md-input v-model="graphSeries.edgeSymbolSize[0]"></md-input>
					</md-field>

					<md-field style="width:135px;margin-left:8px;">
						<label>{{getLangText(label.edge)+getLangText(label.symbolSize)}}</label>
						<md-input v-model="graphSeries.edgeSymbolSize[1]"></md-input>
					</md-field>
				</div>
			</div>

			<label-style
				:lang-type="langType"
				:option="graphSeries.label"
				@label-style-result="onLabelStyle"
			></label-style>
			<item-style
				:lang-type="langType"
				:option="graphSeries.itemStyle"
				@item-style-result="onItemStyle"
			></item-style>
			<line-style
				:lang-type="langType"
				:option="graphSeries.lineStyle"
				@label-style-result="onLineStyle"
			></line-style>

			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.edge)"
				:option="graphSeries.edgeLabel"
				@label-style-result="onEdgeLabelStyle"
			></label-style>

			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)"
				:option="graphSeries.emphasis.label"
				@label-style-result="onLabelStyle"
			></label-style>
			<item-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)"
				:option="graphSeries.emphasis.itemStyle"
				@item-style-result="onItemStyle"
			></item-style>
			<line-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)"
				:option="graphSeries.emphasis.lineStyle"
				@label-style-result="onLineStyle"
			></line-style>

			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)+getLangText(label.edge)"
				:option="graphSeries.emphasis.edgeLabel"
				@label-style-result="onEdgeLabelStyle"
			></label-style>
		</div>
	</div>
</template>
<script>
	import LabelStyle from "@/components/comp/LabelStyle";
	import ItemStyle from "@/components/comp/ItemStyle";
	import LineStyle from "@/components/comp/LineStyle";
	import ColorPicker from "@/components/comp/ColorPicker";
	export default {
		name: "GraphSeries",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			},
			seriesName: {
				type: String,
				default: ""
			}
		},
		components: {
			"label-style": LabelStyle,
			"item-style": ItemStyle,
			"line-style": LineStyle,
			"color-picker": ColorPicker
		},
		data: () => ({
			label: {
				chartTitle: { zh: "关系图", en: "graphChart" },
				symbol: { zh: "标记图形", en: "symbol" },
				symbolSize: { zh: "标记大小", en: "symbolSize" },
				name: { zh: "系列名称", en: "name" },
				symbolRotate: { zh: "标记旋转", en: "symbolRotate" },
				showSymbol: { zh: "标记显示", en: "showSymbol" },
				showAllSymbol: { zh: "显示所有标记", en: "showAllSymbol" },
				symbolOffset: { zh: "标记偏移", en: "symbolOffset" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },

				label: { zh: "标签", en: "label " },
				position: { zh: "位置", en: "position" },
				distance: { zh: "与图形距离", en: "distance" },
				rotate: { zh: "旋转", en: "rotate" },
				formatter: { zh: "模板", en: "formatter" },
				emphasis: { zh: "强调", en: "emphasis" },
				edge: { zh: "边", en: "edge" },

				color: { zh: "图形颜色", en: "color" }
			},
			isShow: false,
			graphSeries: {
				color: [],
				type: "graph",
				name: "",
				symbol: "emptyCircle",
				symbolSize: 4,
				symbolRotate: "",
				symbolOffset: [0, 0],
				edgeSymbol: ["none", "none"],
				edgeSymbolSize: 10,
				label: {},
				itemStyle: {},
				lineStyle: {},
				edgeLabel: {},
				emphasis: {
					label: {},
					itemStyle: {},
					lineStyle: {},
					edgeLabel: {}
				}
			},

			symbol: [
				{ zh: "无", en: "none" },
				{ zh: "空心圆形", en: "emptyCircle" },
				{ zh: "圆形", en: "circle" },
				{ zh: "方形", en: "rect" },
				{ zh: "圆角方形", en: "roundRect" },
				{ zh: "三角形", en: "triangle" },
				{ zh: "图钉", en: "pin" },
				{ zh: "箭头", en: "arrow" },
				{ zh: "钻石", en: "diamond" }
			],
			originOption: "",
			isParse:false
		}),

		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();
				}
			},
				graphSeries:{
			    deep:true,
			    handler(){
				   if(this.isShow&&!this.isParse)
				   this.$emit("series-result", JSON.parse(JSON.stringify(this.graphSeries)));
			    }
			}
		},
		methods: {
			onLineStyle(result) {
				this.graphSeries.lineStyle = result;
			},

			onLabelStyle(result) {
				this.graphSeries.label = result;
			},
			onEdgeLabelStyle() {
				this.graphSeries.edgeLabel = result;
			},
			onItemStyle(result) {
				this.graphSeries.itemStyle = result;
			},
			onLineStyleEmphasis(result) {
				this.graphSeries.emphasis.lineStyle = result;
			},
			onLabelStyleEmphasis(result) {
				this.graphSeries.emphasis.label = result;
			},
			onItemStyleEmphasis(result) {
				this.graphSeries.emphasis.itemStyle = result;
			},
			onEdgeLabelStyleEmphasis() {
				this.graphSeries.emphasis.edgeLabel = result;
			},

			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("series-result", JSON.parse(JSON.stringify(this.graphSeries)));
				}
			},
			parseObj() {
				if(!this.option||JSON.stringify(this.option)=='{}')return;
				this.isParse=true;
				for (var key in this.option) {
					if (key == "emphasis") {
						for (var k in this.option[key]) {
							this.graphSeries[key][k] = this.option[key][k];
						}
						if (!("lineStyle" in this.option[key])) {
							this.graphSeries[key]["lineStyle"] = {};
						}
						if (!("itemStyle" in this.option[key])) {
							this.graphSeries[key]["itemStyle"] = {};
						}
					} else {
						this.graphSeries[key] = this.option[key];
					}
				}
				this.originOption = JSON.stringify(this.graphSeries);
				var that=this;
				setTimeout(() => {
					that.isParse=false;
				}, 100);
			},
			colseOption() {
				this.isShow = false;
				if (this.originOption != JSON.stringify(this.graphSeries)) {
					this.$emit("series-result", this.graphSeries);
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
		},
		beforeDestroy() {
			this.offEvent();
		}
	};
</script>
